<template>
  <div class="all">
    <Layout>
      <header>
        <small>当前位置：{{ address }}</small>
        <span style="height: 40px;">
          <!-- {{ this.$store.getters['common/userInfo'].name }} -->
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              {{ this.$store.getters['common/userInfo'].name }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a"><i class="el-icon-remove"></i>退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
      </header>
      <router-view></router-view>
    </Layout>
  </div>
</template>

<script>
export default {
  data(){
    return{
      // address:this.$route.meta.address
      form:{
        region:''
      }
    }
  },
  computed:{
    address:function () {  
      return this.$store.getters['common/menuList'].reduce((address,it) => {
        if(this.$route.path.slice(4) === it.path){
          address = it.name
        }
        return address
      },'')
    }
  },
  methods: {
    handleCommand() {
        sessionStorage.removeItem('vuex')
        sessionStorage.removeItem('routes')
        if(!!localStorage.getItem('userInfo')){
          let user = JSON.parse(localStorage.getItem('userInfo'))
          console.log(user);
          user.autotoken = ''
          localStorage.setItem('userInfo',JSON.stringify(user))
        }

        this.$router.push('/login')
      }
  },
}
</script>


<style lang="less" scoped>
  header{
    height: 40px;
    border-bottom: 1px solid #fff;
    background-color: #222831;
    color: #fff;
    padding-top: 16px;
    line-height: 40px;
    padding-left: 16px;
    span{
      float: right;
      margin-right: 16px;
      .el-dropdown-link {
          cursor: pointer;
          color: #fff;
      }
    }
  }
</style>